<template>
    <div>
      <button v-on:click="counter += 1">Add 1</button>
      <p>this button has been pressed {{ counter }} time</p>
      <button v-on:click="greet">Greet</button>
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
      <a v-on:click.stop="handle"></a>
      <form v-on:submit.prevent="onSubmit"></form>
      <a v-on:click.stop.prevent></a>
      <form v-on:submit.prevent></form>
      <div v-on:click.capture="doThis">...</div>
      <div v-on:click.self="doThat"></div>
      <a v-on:click.once="doThis"></a>
      <input v-on:keyup.enter="submit">
      <input @keyup.enter="submit">
      <button v-on:click="sayObject('hi',$event)">say object</button>
      <p>{{ name1 }}</p>
    </div>
</template>
<script>
export default {
  name: 'eventHandler',
  data () {
    return {
      title: 'event Handler',
      counter: 0,
      name: 'Vue.js',
      des: ''
    }
  },
  computed: {
    name1: function () {
      alert('name1 method')
      return 'this is name1'
    }
  },
  methods: {
    greet: function (event) {
      // this 在方法里指当前的Vue实例
      alert('Hello ' + this.name + '!')
      // event 是原生的 Dom 事件
      if (event) {
        alert(event.target.tagName)
      }
    },
    say: function (message) {
      alert(message)
    },
    sayObject: function (message, e) { // 在当绑定 v-on:click 事件时，想传入参数同时也传入当前元素：
      alert(message)
      console.log(e.currentTarget)
    }
  }
}
</script>

<style>
.text-danger {
  background: red;
}
</style>
